<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>购物车</title>
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/app.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css" rel="stylesheet" />
</head>
<style type="text/css">
	.shopping_cart ul li .cart_top>span{
		background: url(/static/wechat/img/cart/checked1.png);
		 background-size: 100%;
	}
	.settlement p .catoption_header{
		background: url(/static/wechat/img/cart/checked1.png);
		 background-size: 100%;
	}
	.mui-numbox{
		height: 30px;
		padding: 0 30px;
		width: 92px;
		top:56px !important;
		right: 0 !important
	}
	.mui-numbox .mui-input-numbox, .mui-numbox .mui-numbox-input{
		width: 30px!important;
		padding: 0 0px!important;
	}
	.mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn]{
		width: 30px;
	}
	html,body{
		height: 100%;
	}
	.noshopcar{height: calc(100vh - 50px);background: url('/static/wechat/img/noshopcar.png') no-repeat;background-size: 63%;background-position: center;
	display: {{if .info}}none{{else}}block{{end}}}
	.shopping_cart{display:{{if .info}}block{{else}}none{{end}};}
	.settlement{display:{{if .info}}block{{else}}none{{end}};}
	.mui-slider-handle{width: 100%;}
	.noshopcar span.goto{position: absolute;bottom: 30%;padding:5px 10px;font-size: 15px;border:1px #ccc solid;border-radius: 5px;color: #aaa;left: calc(50% - 69px)}
	.shopping_cart h1{margin-top: 10px;background: #fff;line-height: 40px;height: 40px;padding-left: 10px;
		border-bottom: 1px solid #ddd}
	.shopping_cart h1:nth-of-type(1){margin-top: 0}
	/*.mui-table-view-cell:after{height: 0}*/
	.shopping_cart ul li{margin: 0}
</style>
<body>
<div class="shopping_cart">
	{{range .info}}
	<div>

	<h1>
		<span class="mui-icon iconfont fs-16">&#xe75f;</span> 
		{{if .shop}}
		{{.shop.name}}
		{{else}}
		{{$.system.name}}
		{{end}}
	</h1>
	<ul>
		{{range .shopcar}}
		<li class="pro_car mui-table-view-cell" id="{{.id}}">
			<div class="mui-slider-right mui-disabled">
				<a class="mui-btn mui-btn-red garbage" data-id="{{.id}}">删除</a>
			</div>
			<div class="mui-slider-handle">
				<div id="cart" class="cart_top">
					<span style="background-image: url('/static/wechat/img/cart/checked1.png');">
						<input class="selected" data-id="{{.id}}" type="checkbox" onclick="selected(this)" name="test">
					</span>
					<img src="{{.pathname}}" class="goto" href="/mobile/column/product_content?id={{.pid}}">
				</div>
				<div class="cart_box goto" href="/mobile/column/product_content?id={{.pid}}">
					<p class="overpl1"><span>{{.title}}</span></p>
					<p class="c-999">
						装箱数:{{.number}}<br>
						型号:{{.model}}
					</p>
					<div>
						<!-- 是否可批发，是否满足批发数量 -->
						<span>￥ <b class="bprice" id="pricem{{.id}}" data-id="{{.id}}">{{.pricem}}</b>/{{if eq .spec "1"}}件{{else}}箱{{end}}</span>
						<!-- <input class="j" type="hidden" value="{{.price}}"> -->
					</div>
				</div>
				<span class="garbage" data-id="{{.id}}"><i class="mui-icon fr iconfont">&#xe7a1;</i></span>
				<div class="mui-numbox fr numb" data-numbox-min="{{.minbuy}}" data-numbox-max="999">
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input data-id="{{.id}}" data-price="{{.price}}" data-isw="{{.isw}}" data-width="{{.width}}" data-length="{{.length}}" data-height="{{.height}}" class="mui-input-numbox numbox jg_val" type="number" value="{{.num}}" />
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>		
			</div>
		</li>

		{{end}}
	</ul>
	</div>
	{{end}}
</div>
<!-- <div class="scpic"></div> -->
<div class="settlement">
	<p class="fl wt-w70">
		<span class="catoption_header"><input id="asd" type="checkbox" name=""></span>
			全选
		<span class="fr tx-r" style="font-size: 14px;">
			总计:&yen;<b id="product_total">0.00</b> <span style="font-size: 12px;font-weight: 300;color: #666">(体积:<b id="product_tj">0.00</b>)</span>
		</span>
	</p>
	<p class="fr wt-w30">
		<!-- /wechat/paymoney -->
		<!-- <a id="sure"> -->
			<button id="btn">提交</button>
		<!-- </a> -->
	</p>
</div>
<div class="noshopcar">
	<span class="goto" href="/mobile/index">快去添加商品吧~</span>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="/mobile/index">
        <span class="mui-icon iconfont icon-home2"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="/mobile/column">
        <span class="mui-icon iconfont icon-liebiao"></span>
        <span class="mui-tab-label">分类</span>
    </a>
    <!-- <a class="mui-tab-item" href="/mobile/active">
        <span class="mui-icon iconfont icon-tianmaohaoquan"></span>
        <span class="mui-tab-label">活动</span>
    </a> -->
    <a class="mui-tab-item mui-active" href="/mobile/shopcar">
        <span class="mui-icon iconfont icon-gouwucheman"></span>
        <span class="mui-tab-label">购物车</span>
    </a>
    <a class="mui-tab-item" href="/mobile/my">
		<span class="mui-icon iconfont icon-kefuyouxian"></span>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/other/app.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
{{template "wechat/public/share.html" .}}
<script>

    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    //释放 nav 底部导航 a 链接
    mui('.mui-tab-item').each(function () {
        this.addEventListener('tap',function () {
            var url = this.getAttribute('href');
            window.location.href=url;
        })
    });
    mui('body').on('tap','.goto',function(){
    	if(this.getAttribute("href")){
    		window.location.href=this.getAttribute("href")
    	}
    })
</script>
<div class="mt-statistics">统计代码</div>
</body>
</html>
<script>
	mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    console.log({{.shopcar}})
    //释放 nav 底部导航 a 链接
    mui('.mui-tab-item').each(function () {
    	this.addEventListener('tap',function () {
    		var url = this.getAttribute('href');
    		window.location.href=url;
    	})
    });
 
	 //数量改变后,改变数据库，若可批发，到达批发数量后，改成批发价格
    mui("body").on('change',".numbox",function(){
    	var that = this
    	var id = that.getAttribute("data-id")
    	var price = Number(that.getAttribute("data-price"))
    	var num = Number(that.value)
    	mui.get('/mobile/shopcar/changenum',{id:id,num:num},function(res){
    		if(res==1){
            	cartatine();         			
    		}else if (res==3){
    			mui.toast("库存不足")
    			
    		}
    	})
    })

	var chbAll=document.getElementById('asd');
        var chbs=document.querySelectorAll(
            "div span:first-child>input"
    );
    if(chbAll){
    chbAll.onclick=function(){
    	if (chbAll.checked) {
    		chbAll.parentNode.style.backgroundImage = 'url(/static/wechat/img/cart/checked3.png)';
    	}else {
    		chbAll.parentNode.style.backgroundImage = 'url(/static/wechat/img/cart/checked1.png)';
    	}
        for(var i=0;i<chbs.length;i++){
            chbs[i].checked=this.checked;
           if (chbs[i].checked) {
           	chbs[i].parentNode.style.backgroundImage = 'url(/static/wechat/img/cart/checked3.png)';
           }else {
           	chbs[i].parentNode.style.backgroundImage = 'url(/static/wechat/img/cart/checked1.png)';
           }
        }
        cartatine();
    }
    }
    function selected(e) {
    	// id = e.getAttribute("data-id")
    	var checked = 1;
		var inselected =e.parentNode;
		if (e.checked) {
			checked=1
			inselected.style.backgroundImage = 'url(/static/wechat/img/cart/checked3.png)';
		}else{
			checked=0
			inselected.style.backgroundImage = 'url(/static/wechat/img/cart/checked1.png)';
			chbAll.checked=false;
		}
     	cartatine();
	}

	function cartatine() {
		var sum = 0;
	    var jg_num =0;
		var total = 0;
		var product_num = 0;
		var tj=0
		mui(".pro_car").each(function () {
			if(this.getElementsByClassName("selected")[0].checked){
				// sum = sum + Number(this.getElementsByClassName("j")[0].value) * Number(this.getElementsByClassName("jg_val")[0].value);
				sum = sum + Number(this.getElementsByClassName("bprice")[0].innerText) * Number(this.getElementsByClassName("jg_val")[0].value);

				jg_num=jg_num + Number(this.getElementsByClassName("jg_val")[0].value);

				var length=this.getElementsByClassName("jg_val")[0].getAttribute('data-length')
				var width=this.getElementsByClassName("jg_val")[0].getAttribute('data-width')
				var height=this.getElementsByClassName("jg_val")[0].getAttribute('data-height')
				var vulum=parseFloat(length)*parseFloat(width)*parseFloat(height)*parseFloat(this.getElementsByClassName("jg_val")[0].value)/1000000
				tj+=vulum
			}
		})
		tj=tj.toFixed(2)
		// total += parseInt(sum);
		var newtotal =sum.toFixed(2);
	    document.getElementById('product_total').innerHTML=newtotal;
	    document.getElementById('product_tj').innerHTML=tj;
	    var pro_car =document.getElementsByClassName('pro_car');
	    if (pro_car.length==0){
	    	document.getElementsByClassName('shopping_cart')[0].style.display='none'
	    	document.getElementsByClassName('settlement')[0].style.display='none'
	    	document.getElementsByClassName('noshopcar')[0].style.display='block'
	    }
	}

	// cartatine();

	mui('.garbage').each(function () {
    	var id = this.getAttribute('data-id');
	    this.addEventListener('tap', function() {
			var that=this
			that.disabled=true
			var btnArray = ['否', '是'];
			mui.confirm('确定要删除吗', '提示', btnArray, function(e) {
				if (e.index) {
					mui.ajax('/mobile/del',{
						type:'get',
						data:{id:id,table:'mt_order_car'},
						dataType:'json',
						timeout:1000,
						success: function(data){
	    				if (data) {
	    					mui.toast("删除成功~")
	    					var node=document.getElementById(id)
	    					var pnode=node.parentNode
	    					pnode.removeChild(node)
	    					if (pnode.getElementsByClassName("pro_car").length==0){
	    						var ppnode=pnode.parentNode
	    						ppnode.parentNode.removeChild(ppnode)
	    					}
	    					cartatine()
	    				}else{
	    					mui.toast("删除失败,请重试!")
	    				}
	    				that.disabled=false
	    			},
					error: function(xhr, type){
						mui.toast("网络慢，请重试");
						that.disabled=false
					// 即使加载出错，也得重置
					}
					});
				}else{
					that.disabled=false
				}
			})
		});
    });
	if(document.getElementById('btn')){
	document.getElementById('btn').addEventListener('tap',function () {
		var pro_car =document.getElementsByClassName('pro_car');
		var arr3 =[];
		for (var i = 0; i < pro_car.length; i++) {
			var selected =document.getElementsByClassName('selected')[i];
			var garbage =pro_car[i].getAttribute('id');
			if (selected.checked) {
				arr3.push(garbage);
			}
		}
		if (arr3.length==0){
			mui.toast("请选择商品");
		}else{	
			window.location.href='/mobile/shopcar/sure?cid='+arr3
		}
	});
	}
</script>
